/* custom.css */

:root {
	--pst-color-info: 23, 162, 184;
	--pst-color-logo: #2EB5EB;
	--bs-gray-500: #adb5bd;


}

.theme-switch-button {
	display: none;
}

.theme-version {
	display: none;
}

.bd-sidebar-primary {
	width: 100%;
	/* Full width by default */
}

/* Adjust width for larger screens */
@media (min-width: 768px) {

	/* Example breakpoint for tablets and larger */
	.bd-sidebar-primary {
		width: 270px;
		/* Adjust the width for larger screens */
	}
}

.pre {
	color: #0a7d91;
	/* Change the color of ```` blocks */
}

/* hide on this page */
/* #pst-page-navigation-heading-2 {
display: none;
}  */



/* .copyright {
text-align: center;
} */
p {
	font-size: 0.9em;
	margin-bottom: 1.15rem;
}

html[data-theme=light] {
	--pst-color-secondary: #3d3d3d;
	/*change the secondary color, header link to gray */
	--pst-color-link-hover: #25262;
	/*change the side bar link color to black */
	--pst-color-table-row-hover-bg: #f8f9fa;
	/*change the table row hover color to light gray */
	--sd-color-secondary: gray;
	/*change the secondary color to black */
	--sd-color-secondary-highlight: gray;
	/*change the secondary highlight color to black */
}

.bd-main .bd-content .bd-article-container {
	max-width: 100%;
	/* default is 60em */
}

h1 {
	font-size: 2rem;
	/* make the h1 in the code smaller */
}

/* .bd-page-width {
  max-width: 100%;
} */

.sig-name {
	color: black;
	/* set the class name and attributes to black */
}

.caption-text {
	font-size: 14px;
	/* Sets the smallest font size */
	color: gray;
	/* Sets the color to gray */
}

.bd-links__title {
	/* remove the "section navigation" string*/
	display: none;
}

table {
	width: auto;
	/* Override fit-content which breaks Styler user guide ipynb */
}

/* Main index page overview cards */

.intro-card {
	padding: 30px 10px 20px 10px;
}

.intro-card .sd-card-img-top {
	margin: 10px;
	height: 52px;
	background: none !important;
}

.intro-card .sd-card-title {
	color: var(--pst-color-primary);
	font-size: var(--pst-font-size-h5);
	padding: 1rem 0rem 0.5rem 0rem;
}

.intro-card .sd-card-footer {
	border: none !important;
}

.intro-card .sd-card-footer p.sd-card-text {
	max-width: 220px;
	margin-left: auto;
	margin-right: auto;
}

.intro-card .sd-btn-secondary {
	background-color: #6c757d !important;
	border-color: #6c757d !important;
}

.intro-card .sd-btn-secondary:hover {
	background-color: #5a6268 !important;
	border-color: #545b62 !important;
}

.card,
.card img {
	background-color: var(--pst-color-background);
}

/* Remove hover effect from table rows */
table tr:hover {
	background-color: transparent !important;
}

/* Navigation bar style*/
.navbar-header-items__end {
	display: flex;
	align-items: center;
}

.navbar-icon-links {
	display: flex;
	align-items: center;
	margin-right: 1rem;
	/* Adjust as needed */
}

.search-container {
	flex: 1;
	display: flex;
	justify-content: flex-end;
}

.DocSearch-Button {
	display: flex;
	align-items: center;
	padding: 0.5rem 1rem;
	border: 1px solid #ddd;
	border-radius: 4px;
	background-color: #fff;
	color: #494a49;
	cursor: pointer;
}

.DocSearch-Button-Container {
	display: flex;
	align-items: center;
	margin-right: 0.5rem;
}

.DocSearch-Button-Placeholder {
	margin-left: 0.5rem;
}

/* Hide the duplicate search button */
.search-button-field {
	display: none !important;
}

/* Default banner layout */
.announcement-banner {
	background-color: #7acef0;
	/* Light blue background */
	color: white;
	/* White text color */
	padding: 10px 20px;
	position: fixed;
	/* Fixed at the top */
	width: 100%;
	/* Full width */
	z-index: 1000;
	/* Make sure it's on top of other content */
	top: 0;
	/* Stick to the top */
	left: 0;
	/* Align to the left */
	text-align: center;
	/* Center the text */
	display: flex;
	/* Use Flexbox for layout */
	align-items: center;
	/* Center items vertically */
	justify-content: center;
	/* Center content horizontally */
	box-sizing: border-box;
	/* Ensure padding is included in width calculation */
	flex-wrap: nowrap;
	/* No wrapping */
	font-size: 16px;
	/* Adjust font size for smaller screens */
}

.announcement-banner p {
	margin: 0;
	/* Remove default margin */
	color: white;
	/* White text color */
	flex: 0 1 auto;
	/* Do not allow the text to take up all available space */
	word-wrap: break-word;
	/* Ensure long words break and wrap */
	text-align: center;
	/* Center text */
	font-size: 16px;
	/* Adjust font size for smaller screens */
}

.announcement-banner a {
	color: white !important;
	/* Ensures that this color override takes precedence */
}

.announcement-banner button {
	background: none;
	border: none;
	color: white;
	font-size: 16px;
	cursor: pointer;
	flex-shrink: 0;
	/* Prevent the button from shrinking */
	display: flex;
	align-items: center;
	/* Center the button vertically */
	margin-left: 10px;
	/* Space between text and button */
}

.bd-header-announcement,
.bd-header-announcement__content {
	background-color: transparent;
	/* Make background transparent */
	padding: 0;
	/* Remove padding if any */
	margin: 0;
	/* Remove margin if any */
}

/* Override styles for medium screens */
@media (max-width: 1200px) {
	.announcement-banner {
		flex-direction: row;
		/* Row layout for medium screens */
		align-items: center;
		/* Align items to the center */
	}

	.announcement-banner p {
		text-align: center;
		/* Center text */
		width: auto;
		/* Automatic width for text */
	}

	.announcement-banner button {
		margin-left: 10px;
		/* Add left margin */
	}
}

/* Adjustments for even smaller screens */
@media (max-width: 600px) {
	.announcement-banner {
		font-size: 14px;
		/* Adjust font size for smaller screens */
	}

	.announcement-banner button {
		font-size: 14px;
		/* Adjust button size for smaller screens */
	}

	.announcement-banner p {
		font-size: 14px;
		/* Adjust text size for smaller screens */
	}
}

/* Adjustments for smallest screens */
@media (max-width: 500px) {
	.announcement-banner {
		font-size: 10px;
		/* Further adjust font size for smaller screens */
	}

	.announcement-banner button {
		font-size: 10px;
		/* Further adjust button size for smaller screens */
	}

	.announcement-banner p {
		font-size: 10px;
		/* Further adjust text size for smaller screens */
	}
}

@media (max-width: 380px) {
	.announcement-banner {
		font-size: 8px;
		/* Further adjust font size for smallest screens */
	}

	.announcement-banner button {
		font-size: 8px;
		/* Further adjust button size for smallest screens */
	}

	.announcement-banner p {
		font-size: 8px;
		/* Further adjust text size for smallest screens */
	}
}
